<template>

	<el-dialog v-model="dialogFormVisible" :title="formText" class="elDiaLog" lock-scroll width="1200px"
		:close-on-click-modal="false" :close-on-press-escape="false">
		<div class="selectUser">
			<el-card style="margin-bottom: 30px;">
				<el-descriptions title="基础信息" direction="horizontal"  :column="3">
					<el-descriptions-item width="30%" label="所属公司：">{{ parentsData.company?.name }}</el-descriptions-item>
					<el-descriptions-item width="30%" label="仓库：">{{ parentsData.stockroom?.name }}</el-descriptions-item>
					<el-descriptions-item width="30%" label="仓位：">{{ parentsData.position?.name }}</el-descriptions-item>
					<el-descriptions-item width="30%" label="物品名称：">{{ parentsData.goods?.name }}</el-descriptions-item>
					<el-descriptions-item width="30%" label="编码：">{{ parentsData.goods?.sku }}</el-descriptions-item>
					<el-descriptions-item width="30%" label="单位：">{{ parentsData.goods?.unit }}</el-descriptions-item>
					<el-descriptions-item width="30%" label="品牌：">{{ parentsData.goods?.brand }}</el-descriptions-item>
					<el-descriptions-item width="30%"label="规格型号：">{{ parentsData.goods?.specs }}</el-descriptions-item>
					<el-descriptions-item width="30%" label="物料号：">{{ parentsData.goods?.part_no }}</el-descriptions-item>
					<el-descriptions-item label="备注：">{{ parentsData.goods?.mark }}</el-descriptions-item>
				</el-descriptions>
			</el-card>
			<el-table ref="dataTableRef" v-loading="loading" :data="tableData" align="left" tooltip-effect="dark" border>
				<el-table-column type="index" label="序号" width="80" align="center" />
				<el-table-column label="类型" align="center" width="100" prop="type">
					<template #default="scope">
						<el-tag v-if="scope.row.type == 1" type="success">入库</el-tag>
						<el-tag v-else-if="scope.row.type == 2" type="danger">出库</el-tag>
						<el-tag v-else="scope.row.type == 3" type="primary">调拨</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="备注" min-width="200" align="center" prop="logtable.mark" />
				<el-table-column label="数量" min-width="100" fixed="right" align="center" prop="stock" >	</el-table-column>
				<el-table-column label="变动前库存" min-width="100" fixed="right" align="center" prop="after_stock" ></el-table-column>
				<el-table-column label="变动后库存" min-width="100" fixed="right" align="center" prop="before_stock" ></el-table-column>
				<el-table-column label="变更时间" min-width="150" fixed="right" align="center" prop="add_time_text" />
			
			</el-table>

			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</div>


	</el-dialog>
</template>


<script setup lang="ts">
	defineOptions({
		name: "Stockroom",
		inheritAttrs: false,
	});
	import router from '@/router';
	//接口地址
	import {
		getStockroomOptions,
		getPositionOptions,
		getStockLog
	} from "@/api/wms";
	import { assign } from 'lodash';

	const emit = defineEmits(['getSelectItems']);
	const dataTableRef = ref();
	const queryFormRef = ref(ElForm);
	const queryParams = reactive({
		page: 1,
		limit: 20,
		gid: "",
		position_id: ""
	})
	const dialogFormVisible = ref(false);
	const formText = ref<string>(""); // 操作窗口标题
	const loading = ref(false);
	const total = ref(0);
	const stockList = ref<any>();
	const positionCell = ref<any>()
	const tableData = ref();

	const parentsData = ref<any>();//父级传输过来的数据


	//新增或者修改加载load按钮
	function handleShow(row : any, act : string) {
		parentsData.value = row;
		queryParams.gid = row.gid;
		queryParams.position_id = row.pid;
		getPositionList(row.sid);
		handleDo(row, act)
	}

	// 操作
	function handleDo(row : any, act : string) {
		switch (act) {
			case 'act_change':
				dialogFormVisible.value = true
				formText.value = "变更记录"
				handleQuery();
				break
		}
	}


	function handleQuery() {
		loading.value = true;
		getStockLog(queryParams).then((res) => {
			console.log(res)
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false;
		})
	}

	/**
	 * 获取仓库列表
	 *  */
	function initStockList() {
		getStockroomOptions({}).then((res) => {
			console.log(res)
			stockList.value = res.data;
		}).finally(() => { })
	}
	/**
	 * 获取仓位
	 */
	function getPositionList(sid : any) {
		getPositionOptions({
			sid: sid
		}).then((res) => {
			console.log(res)
			positionCell.value = res.data;
		}).finally(() => { })
	}

	onMounted(() => {
		// 1.请求仓库资源文件  2 请求仓库
		handleQuery();
		initStockList();
		// getPositionList(props.dataPar.sid);
	})

	defineExpose({
		handleShow
	});
</script>


<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.min220 {
		width: 220px
	}
</style>